<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,maximum-scale=1.0" />
    <title><#if entity.id??>编辑<#else>新增</#if>商品表</title>
    <#include "/view/admin/head.html"/>
    
        <script type="text/javascript" src="${base}/jstool/bootstrap-fileinput/js/fileinput.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-fileinput/js/locals/zh.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-fileinput/css/fileinput.min.css" />
    <script type="text/javascript" src="${base}/jstool/bootstrap-switch/bootstrap-switch.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-switch/bootstrap-switch.min.css" />
    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-datetimepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" />
	<script type="text/javascript"
			src="${base}/jstool/layer/layer.js"></script>

    <script type="text/javascript" src="${base}/jstool/bootstrap-validator-0.5.3/js/bootstrapValidator.min.js"></script>
    <script type="text/javascript" src="${base}/jstool/bootstrap-validator-0.5.3/lang/zh_CN.min.js"></script>
    <link rel="stylesheet" type="text/css" href="${base}/jstool/bootstrap-validator-0.5.3/css/bootstrapValidator.min.css" />


    <style type="text/css">
        .list-path {
            height: 50px;
            line-height: 50px;
            background-color: #9acfea;
        }

        .table-class {
            width: 90%;
            text-align: center;
            border: 1px solid #afd9ee;
            margin: 0 auto;
            margin-top: 50px;
        }

        table th {
            width: 20%;
            background-color: #d9edf7;
            text-align: right;
        }


    </style>
    <script type="text/javascript">
    
    $(function(){
    	
      $('#picPath').fileinput({
     	  language: 'zh', //设置语言
          allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后缀
          showUpload: true, //是否显示上传按钮
          uploadUrl: '${base}/busin/uploadImg?id=${entity.id!}&picType=0',//上传的地址
          showCaption: false,//是否显示标题
          browseClass: "btn btn-primary", //按钮样式
          maxFileCount: 20, //表示允许同时上传的最大文件个数
          previewFileIcon: "<i class='glyphicon glyphicon-king'></i>", 
        
    }); 
      //这是提交完成后的回调函数    
      $("#picPath").on("fileuploaded", function (event, data, previewId, index) {  
				if(data.response.status==1){
					$("#changevalue").val(0);
				}else{
					layer("上传商品图片错误!");
				}
      });  
      
      $('#picPath1').fileinput({
    	  language: 'zh', //设置语言
          allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后缀
          showUpload: true, //是否显示上传按钮
          uploadUrl: '${base}/busin/uploadImg?id=${entity.id!}&picType=1',//上传的地址
          showCaption: false,//是否显示标题
          browseClass: "btn btn-primary", //按钮样式
          maxFileCount: 20, //表示允许同时上传的最大文件个数
          previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
     
        
    }); 
      //这是提交完成后的回调函数    
      $("#picPath1").on("fileuploaded", function (event, data, previewId, index) {  
				if(data.response.status==1){
					$("#changevalue").val(0);
				}else{
					layer("上传商品图片错误!");
				}
      });  
      
      $('#picPath2').fileinput({
    	  language: 'zh', //设置语言
          allowedFileExtensions : ['jpg', 'png','gif','jpeg'],//接收的文件后缀
          showUpload: true, //是否显示上传按钮
          uploadUrl: '${base}/busin/uploadImg?id=${entity.id!}&picType=3',//上传的地址
          showCaption: false,//是否显示标题
          browseClass: "btn btn-primary", //按钮样式
          maxFileCount: 20, //表示允许同时上传的最大文件个数
          previewFileIcon: "<i class='glyphicon glyphicon-king'></i>",
     
        
    }); 
      //这是提交完成后的回调函数    
      $("#picPath2").on("fileuploaded", function (event, data, previewId, index) {  
				if(data.response.status==1){
					$("#changevalue").val(0);
				}else{
					layer("上传商品图片错误!");
				}
      });  
      
    })
        $(function(){
            //初始化
		 $('[name="soldOutcb"]').bootstrapSwitch({
                                onText:"是",
                                offText:"否",
                        onColor:"success",
                        offColor:"info",
                        size:"small",
                        onSwitchChange:function(event,state){
                            if(state==true){
                                $(this).val("1");
                                $('[name="soldOut"]').val("1");
                            }else{
                                $(this).val("0");
                                $('[name="soldOut"]').val("0");
                            }
                        }
                    });

            


        });

    
    function doBack(){
    	
    	
    	window.location.href="${base}/busin/czjcommodityStep?id="+entity.id;
    }
    
    function doSvse(id){
    	
     		/* layer.confirm('你需要修改图片顺序吗？', {
    			  btn: ['是','否'], //按钮
    			  closeBtn: 0//不显示关闭按钮
    			}, function(){
    				 location.reload();
    				window.location="${base}/busin/add1?id="+id;
    			}, function(){
    				document.form1.submit();
    			}); */
    			var changevalue=$("#changevalue").val();
    			if(changevalue==1){
    				document.form1.submit();
    				//loading层
    				var index = layer.load(1, {
    				  shade: [0.1,'#fff'] //0.1透明度的白色背景
    				});
    			}else{
    				layer.confirm('你有上传新商品图片，需要修改图片顺序吗？', {
    	     			   btn: ['是','否'], //可以无限个按钮
    	     			   btn2: function(index, layero){
    	     					document.form1.submit();
    	     					//loading层
    	     					var index = layer.load(1, {
    	     					  shade: [0.1,'#fff'] //0.1透明度的白色背景
    	     					});
    	     			  }
    	     			}, function(index, layero){
    	     				window.location="${base}/busin/add1?id="+id;
    	     				//loading层
    	     				var index = layer.load(1, {
    	     				  shade: [0.1,'#fff'] //0.1透明度的白色背景
    	     				});
    	     			});
    			}
     		/* layer.confirm('你需要修改图片顺序吗？', {
     			   btn: ['是','否'], //可以无限个按钮
     			   btn2: function(index, layero){
     					document.form1.submit();
     			  }
     			}, function(index, layero){
     				window.location="${base}/busin/add1?id="+id;
     			}); */
    	
    }
    </script>
</head>
<body>

<div class="list-path" > <span style="margin-left: 50px;"><span class="glyphicon glyphicon-home"></span>
 商品管理/下一步

</span></div>


<div class="table-class">
    <#include "/view/admin/opermsg.html"/>
    <form  method="POST" action="${base}/busin/czjspecificationAdd" id="form1" name="form1"
     >
    <table class="table table-bordered">

                  <tr>
                  <input type="hidden" name="commodityId" value="${entity.id!}">
                  <input type="hidden" id="changevalue" value="1">
                <th class="pictd">商品图片&nbsp;&nbsp;<br/>750px*auto</th>
                <td colspan="">
              		    <div class="form-group">
      				 <input type="file" class="form-control"   multiple id="picPath"   id="picPath" name="file" >
      				 
                    </div>
              		
                </td>
                </tr>
                <tr>
                 <th>原商品图片</th>
                <td colspan="3">
              		        <#list pic1 as p1>
              		        
              		          <div style="width: 190px;height: 210px;float: left ;margin-left: 10px;">
                     <div style="width:180px; height: 180px; margin-top: 5px; margin-left: 5px">
            			<div style="width:150px; height: 150px;  margin-top: 5px; margin-left: 5px">
                          <img alt="" src="${base}${p1.imagePath!}" width="150px" height="150px"/>
                         </div>
                         <br/>
                         <a href="javascript:doDelete('${p1.imgId!}','${entity.id!}')" class="btn btn-primary">删除</a>
                          <input type="hidden" name="imgId" value="${p1.imgId!}" />
                             <input type="text" name="sequ" value="${p1.sequ!}" onblur="doVal(this.value)"  placeholder="请输入顺序" style="height:30px;width:80px">
                       </div>
                     </div>
                       
                    </#list>
              		
                </td>
                </tr> 
                  <tr>
                <th>商品推荐显示图片&nbsp;&nbsp;<br/>最低350px*350px</th>
                <td colspan="3">
              		    <div class="form-group">
      				 <input type="file" class="form-control"   id="picPath1" name="file" >
      				 
                    </div>
              		
                </td>
                </tr>
                <tr>
                 <th>原商品推荐显示图片</th>
                <td colspan="3">
              		        <#list pic2 as p2>
                    <div style="width: 190px;height: 190px;float: left ;margin-left: 10px;">
                     <div style="width:180px; height: 180px;  margin-top: 5px; margin-left: 5px">
            			<div style="width:150px; height: 150px;  margin-top: 5px; margin-left: 5px">
                          <img alt="" src="${base}${p2.imagePath!}" width="150px" height="150px"/>
                         </div>
                        <div style="width: 40px;height:40x; margin-left:60px;margin-top: 5px">
                         <a href="javascript:doDelete('${p2.imgId!}','${entity.id!}')" class="btn btn-primary">删除</a>
                        </div>
                       </div>
                     </div>
                    </#list>
              		
                </td>
                </tr>
                   <tr>
                <th>商品详情图片&nbsp;&nbsp;<br/>750px*auto</th>
                <td colspan="3">
              		    <div class="form-group">
      				 <input type="file" class="form-control"  multiple id="picPath2" name="file" >
      				 
                    </div>
              		
                </td>
                </tr>
                <tr>
                 <th>原商品详情图片</th>
                <td colspan="3">
              		      <!--   <#list pic3 as p3>
                   
                     <div style="width: 220px;height: 120px;float: left ;margin-left: 10px;">
                     <div style="width:180px; height: 180px;margin-top: 5px; margin-left: 5px">
            			<div style="width:150px; height: 150px; margin-top: 5px; margin-left: 5px">
                          <img alt="" src="${base}${p3.imagePath!}" width="150px" height="150px"/>
                         </div>
                         <br/>
                         <a href="javascript:doDelete('${p3.imgId!}','${entity.id!}')" class="btn btn-primary">删除</a>
                         <input type="text" name="sequ1" value="${p3.sequ!}" onblur="doVal(this.value)"   placeholder="请输入顺序" style="height:30px;width:80px">
                          <input type="hidden" name="imgId1" value="${p3.imgId!}" />
                       </div>
                     </div>
                    </#list> -->
                     <#list pic3 as p3>
              		        
              		          <div style="width: 190px;height: 210px;float: left ;margin-left: 10px;">
                     <div style="width:180px; height: 180px; margin-top: 5px; margin-left: 5px">
            			<div style="width:150px; height: 150px;  margin-top: 5px; margin-left: 5px">
                            <img alt="" src="${base}${p3.imagePath!}" width="150px" height="150px"/>
                         </div>
                         <br/>
                      <a href="javascript:doDelete('${p3.imgId!}','${entity.id!}')" class="btn btn-primary">删除</a>
                         <input type="text" name="sequ1" value="${p3.sequ!}" onblur="doVal(this.value)"   placeholder="请输入顺序" style="height:30px;width:80px">
                          <input type="hidden" name="imgId1" value="${p3.imgId!}" />
                       </div>
                     </div>
                       
                    </#list>
              		
                </td>
             
                
                </tr> 
                
                
                <script>
							
						function doVal(num){
							if(""!=num){
							var tt=/^\d+$/g;
							if(tt.test(num)){
							}else{
								
							alert('请输入正整数');
							$("input[name='sequ']").val("");
								} 
							}
							
						}
						
						</script>
						
						<script>
							
						function doVal1(num){
							if(""!=num){
							var tt=/^\d+$/g;
							if(tt.test(num)){
							}else{
								
							alert('请输入正整数');
							$("input[name='sequ1']").val("");
								} 
							}
							
						}
						
						</script>
						

                        <input type="hidden" style="display: none" name="delFlag" value="${entity.delFlag!}"/>

  <tr>
            <td colspan="4" width="100%" style="text-align: center;">
   
              
                <a class="btn btn-success " href="${base}/busin/czjcommodityStep?id=${entity.id}">
                <span style="width: 20px;">&nbsp;</span>
                   </span>上一步</a>
            <!--  <a href="${base}/busin/czjcommodityStep?id=${entity.id}" class="btn btn-success">修改</a> -->
                 <input type="button" onclick="doSvse('${entity.id}')" class="btn btn-success " value="下一步"/>

            </td>
        </tr>
    </table>
</form>




</div>

<script type="text/javascript">

function doDelete(imgId,id){
	
		if(""==imgId){
			alert("不能删除图片，服务器开小差了");
			
			return ;
		}
		if(""==id){
			alert("不能删除图片，服务器开小差了");
			return ;
		}
		 $
		.ajax( {
			url : "${base}/busin/delteImg",
			data : {
				"imgId" :imgId,
				"id":id
			},
			dataType : "json",
			type : "get",
			success : function(data) {
				if(data.status==0){
					alert("服务器错误");
				}else{
					
					window.location="${base}/busin/add1?id="+id;
					
				}
			},
			error : function() {
				alert("服务器错误,服务器开小差了。。");
			}

		});
		
	} 

</script>


</body>
</html>
